<template>
    <div>
        <div class="login">
            <div class="box">
                <div class="logo">LOGO</div>
                <div class="form">
                    <div class="form-item">
                        <p>手机号码</p>
                        <input type="text" v-model="phone">
                    </div>
                    <div class="form-item">
                        <p>密码</p>
                        <input type="password" v-model="password" @keyup.enter="submit">
                    </div>
                    <div class="form-btn">
                        <button class="login-btn"  @click="submit">登录</button>
                        <router-link tag="button" class="reg-btn" to="/register">注册</router-link>
                    </div>
                </div>
                <div class="tourist">
                    <span @click="tourist">游客登录</span>
                    <span style="margin:0px 5px">|</span>
                    <span @click="reset">忘记密码</span>
                </div>
                <div class="other">
                    <div class="other-title">第三方登录</div>
                    <div class="other-icon">
                        <div class="item-icon" @click="otherlogin">
                            <img src="../../assets/img/qq.png" alt="">
                        </div>
                        <div class="item-icon" @click="otherlogin">
                            <img src="../../assets/img/weix.png" alt="">
                        </div>
                        <div class="item-icon" @click="otherlogin">
                            <img src="../../assets/img/weibo.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import {getUser,getStatus,getLogout} from "../../api/base"

export default {
    data() {
        return {
            phone: "", // 号码
            password:"", // 密码
        }
    },
    methods:{
        // 登录
        submit(){
            getUser({"phone":this.phone,"password":this.password}).then(data=>{
                let userId = data.account.id;
                console.log(userId)
                if(data.code == 200){
                    getStatus().then(data=>{
                        if(data.data.code == 200){
                            this.$store.commit("getUserId",userId )
                            this.$store.commit("setLogin",true);
                            this.$router.push("recommend")
                        }
                    })
                    
                }else{
                    Toast.fail('错误');
                }
            })
            getLogout()
        },
        // 游客登录
        tourist(){
            this.$router.push("/recommend")
            this.$store.commit("setLogin",false);
        },
        // 忘记密码
        reset(){
            Toast('你再想想看！');
        },
        // 第三方登录
        otherlogin(){
            Toast('该功能开发中');

        }
    }
}
</script>



<style lang="less">
    .login{
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        // background: #E20001;
        .box{
            width: 60%;
            margin: 200px auto;
            // border: 1px solid #000;
           .logo{
               color: red;
               font-size: 30px;
           } 
           .form{
               .form-item{
                   margin-bottom: 10px;
                   p{
                       font-size: 14px;
                       color: #808080;
                   }
                   input{
                       width: 100%;
                       padding: 20px 0px 10px 0px;
                       outline: none;
                       border: none;
                       background: transparent;
                       border-bottom: 1px solid #ccc;
                       font-size: 18px;
                       color: #333;
                   }
               }
               .form-btn{
                   display: flex;
                   justify-content: space-around;
                   margin-top: 30px;
                   button{
                       width: 150px;
                       padding: 5px 0px;
                       border-radius: 20px;
                       outline: none;
                       background: #fff;
                       border: 2px solid #E20001;
                       &.login-btn{
                           background: #E20001;
                            color: #fff;
                       }
                       &.reg-btn{
                           color: #E20001;
                       }
                   }
               }
           }
           .tourist{
               color: #999;
               text-align: center;
               height: 80px;
               line-height: 80px;
               font-size: 16px;
           }
           .other{
               margin-top: 20px;
               .other-title{
                   width: 100px;
                   margin: 0px auto;
                   text-align: center;
                   font-size: 16px;
                   position: relative;
                   &::before,&::after{
                       display: block;
                       content: "";
                       width: 100px;
                       height: 1px;
                       background: #E20001;
                       position: absolute;
                       top: 9px;
                   }
                   &::before{
                       left: -100px;
                   }
                   &::after{
                       right: -100px;
                   }
               }
                .other-icon{
                    display: flex;
                    justify-content: space-around;
                    padding: 10px;
                    .item-icon{
                        width: 50px;
                        height: 50px;
                        overflow: hidden;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
           }
        }
    }
</style>
